<template>
  <el-dialog
    class="upload-home-file-modal"
    append-to-body
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(500)"
    :before-close="handleClose">
    <div class="content">
      <div class="row">
        <span class="label">名称</span>
        <div class="input-content">
          <el-input placeholder="请输入" v-model="projectTitel"></el-input>
        </div>
      </div>
      <div v-if="projectType === '7'" class="row">
        <span class="label">链接地址</span>
        <div class="input-content">
          <el-input placeholder="请输入" v-model="projectPath"></el-input>
        </div>
      </div>
      <div v-else class="row upload-row">
        <el-upload
          class="upload-project-file"
          ref="upload"
          action="#"
          :accept="accept"
          :on-change="uploadChange"
          :file-list="fileList"
          :show-file-list="true"
          :auto-upload="false">
          <el-button :disabled="loading" slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="handleSubmit">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    projectType: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: ''
    }
  },
  computed: {
    title() {
      return this.projectType === '7' ? '保存链接' : '上传文件';
    }
  },
  watch: {
    visible(val) {
      if (!val) {
        this.projectTitel = '';
        this.fileList = [];
      }
    }
  },
  data() {
    return {
      projectTitel: '',
      // 上传文件
      fileList: [],
      projectPath: ''
    };
  },
  methods: {
    uploadChange(file, fileList) {
      this.fileList = [file];
    },
    handleClose() {
      this.$emit('cancel', false);
    },
    handleSubmit() {
      if (!this.projectTitel) return this.$message.warning('请填写名称');
      if (this.projectType === '7') {
        if (!this.projectPath) return this.$message.warning('请填写链接地址');
      } else if (!this.fileList.length) {
        return this.$message.warning('请上传文件');
      }
      const file = this.fileList[0];
      const params = {
        file: file && file.raw,
        path: this.projectPath,
        projectTitel: this.projectTitel
      };
      this.$emit('submit', params);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/styles/dialog";

.upload-home-file-modal {
  .content {
    width: 100%;
    min-height: 200px;
    padding: 20px;
    .row {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 30px;
      .label {
        width: 120px;
        text-align: center;
        color: $mainColor;
      }
      .input-content {
        flex: 1;
      }
      &.upload-row {
        padding-left: 120px;
        /deep/ .el-upload-list__item-name {
          color: $mainColor;
          width: 200px;
        }
      }
    }
  }
}
</style>
